<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局</title>
</head>

<script>
    window.onload = function () {
        var itemList = document.getElementsByClassName('item')
        for (var i = 0; i < itemList.length; i++) {
            itemList[i].style.backgroundColor = getColor()
        }
        function getColor() {
            return '#' + (Math.random() * 0xffffff).toString(16).slice(-6)
        }
    }

</script>

<body>
    <div class="flex-container">
        <div class="item"> 1 </div>
        <div class="item"> 2 </div>
        <div class="item"> 3 </div>
        <div class="item"> 4 </div>
    </div>
    <br>
    <div class="flex-container bigContainer">
        <div class="item"> 1 </div>
        <div class="item big"> 2 </div>
        <div class="item"> 3 </div>
        <div class="item"> 4 </div>
    </div>
    <br>
    <div class="container">
        <!-- Flex 项目 A -->
        <div class="item"><span>A</span>longlong</div>
        <!-- Flex 项目 B -->
        <div class="item"><span>B</span>ook</div>
        <!-- Flex 项目 C -->
        <div class="item"><span>C</span>ountriest</div>
        <!-- Flex 项目 D -->
        <div class="item"><span>D</span>iscussiscusssss</div>
        <!-- Flex 项目 E -->
        <div class="item"><span>E</span>astern</div>
    </div>
</body>
<style>
    .flex-container {
        display: flex;
        inline-size: 300px;
        block-size: 300px;
        background-color: blanchedalmond;
    }

    .bigContainer {
        display: flex;
        inline-size: 600px;
        block-size: 300px;
        background-color: blanchedalmond;
        justify-content: space-between;
        align-items: center;
    }

    .item {
        inline-size: 80px;
        block-size: 80px;
    }

    .big {
        inline-size: 120px;
        block-size: 120px;
        align-self: self-start;
    }

    .container {
        display: flex;
        inline-size: 800px;
        font-size: 1.5rem;
        background-color: green;
    }

    .container .item {
        flex: 1;
    }

    .item span {
        font-size: 2rem;
    }
</style>

</html>